<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>image</title>
    <style>
        #canvas {
            width: 600px;
            height: 400px;
            border: 1px solid black;
        }

    </style>
</head>
<body>
<h1>book3</h1>
<canvas id="canvas"></canvas>
<img src = "../../assets/imgs/山020.jpg " style="width:600px"/>
<script>
    const ctx = document.querySelector("#canvas").getContext("2d")

    const img  = new Image()
    img.src = '../../assets/imgs/山020.jpg'

    img.onload = function(){
        ctx.drawImage(img,0,0,300,200,50,50,150,100) // 参数： 图像，坐标，图片的大小,裁切的坐标，裁切的大小
    }
</script>
</body>
</html>